<template>
  <div>
    <div style="font-size: 24px;font-weight:bold;color: #000;">报修统计</div>
    <div class="main">
      <div class="main_cart">
        <img src="../assets/processed-bg.png">
        <span>{{repairs.pending}}单</span>
      </div>
      <div class="main_cart">
        <img src="../assets/march-bg.png">
        <span>{{repairs.beRepaired}}单</span>
      </div>
      <div class="main_cart">
        <img src="../assets/pending-bg.png">
        <span>{{repairs.repaired}}单</span>
      </div>
    </div>
    <div class="graph_main">
      <div
        class="columnar"
        id="columnar_bar"
        style="width: 66%; height: 66vh;display: inline-block"
      >
      </div>
      <div class="pei_one"
           id="pei_bin"
           style="width: 33%; height: 66vh;display: inline-block">
      </div>
    </div>
  </div>
</template>

<script>
  import { pick } from 'lodash';
  import * as echarts from "echarts";
  import {$dataStatisticApi} from '../network/statistic/DataStatisticApi';

  export default {
    name: "Console",
    data() {
      return {
        repairs: {
          pending: 0,       // 已报修(待处理)
          beRepaired: 0,    // 维修中(进行中)
          repaired: 0       // 已修复(已处理)
        },
        // 出入库统计
        property: {
          timeList: [],
          entryList: [],
          exportList: [],
        },
        repairDecice: []
      };
    },
    mounted() {
      this.initEcharts();

    },
    methods: {
      /**
       * 报修数据统计
       */
      initRepairData() {
        $dataStatisticApi.getRepairStatistic().then(({data}) => {
          this.repairs = pick(Object.assign({}, data), 'pending', 'beRepaired', 'repaired')
        });
      },
      /**
       * 资产出入库统计图数据
       * @returns {Promise<void>}
       */
      async initPropertyData() {
        await $dataStatisticApi.getPropertyStatistic().then(({data}) => {
          this.property.timeList.push(...data.timeList);
          this.property.entryList.push(...data.entryList);
          this.property.exportList.push(...data.exportList);
        });
        const option = {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              crossStyle: {
                color: "#999",
              },
            },
          },
          title: {
            text: "资产入库统计",
            textStyle: {
              fontSize: 24,
            },
            top: "20",
          },
          legend: {
            data: ["入库数量", "出库数量"],
            top: 120,
            right: 150,
            textStyle: {
              fontSize: '16',
            }
          },
          xAxis: [
            {
              type: "category",
              data: this.property.timeList,
              axisPointer: {
                type: "shadow",
              },
              axisLabel: {
                textStyle: {
                  fontSize: '14',
                }
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "资产入库",
              nameTextStyle: {
                padding: [0, -50, 0, 0],
                fontSize: 16
              },
              min: 0,
              max: 20,
              interval: 3,
              axisLabel: {
                formatter: "{value} ",
                textStyle: {
                  fontSize: '16',
                }
              },
            },
            {
              type: "value",
              name: "资产出库",
              nameTextStyle: {
                padding: [0, 50, 0, 0],
                fontSize: 16
              },
              min: 0,
              max: 20,
              interval: 3,
              axisLabel: {
                formatter: "{value} ",
                textStyle: {
                  fontSize: '16',
                }
              },
            },
          ],
          grid: {
            top: 245,
            left: 50,
            bottom: 20,
          },
          series: [
            {
              name: "入库数量",
              type: "bar",
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                },
              },
              barWidth: 36,
              data: this.property.entryList,
            },
            {
              name: "出库数量",
              type: "bar",
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                },
              },
              barWidth: 36,
              data: this.property.exportList,
            },
          ],
        };
        const columnar_bar = echarts.init(document.getElementById("columnar_bar")); // 图标初始化
        columnar_bar.setOption(option); // 渲染页面
        // 随着屏幕大小调节图表
        window.addEventListener("resize", () => {
          columnar_bar.resize();
        });
      },

      async initRepairDeviceData() {
        await $dataStatisticApi.getRepairDeviceStatis().then(({data}) => {
          this.repairDecice.push(...data);
        });
        const option_bin = {
          tooltip: {
            trigger: 'item'
          },
          title: {
            text: "报修设备统计图",
            textStyle: {
              fontSize: 24,
            },
            top: "20",
          },
          legend: {
            top: 120,
            right: 135,
            textStyle: {
              fontSize: '16',
            }
          },
          series: [
            {
              name: '设备名称',
              type: 'pie',
              radius: ['40%', '70%'],
              center: ['50%', '65%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 30,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: this.repairDecice
            }
          ]
        };
        const pei_bin = echarts.init(document.getElementById("pei_bin")); // 图标初始化
        pei_bin.setOption(option_bin);
        window.addEventListener("resize", () => {
          pei_bin.resize();
        });
      },
      initEcharts() {
        this.initRepairData();
        this.initPropertyData();
        this.initRepairDeviceData();
      },
    },
  };
</script>

<style scoped>
  .main {
    width: 100%;
    display: flex;
  }

  .main_cart {
    width: 33%;
    height: 150px;
    border: 1px solid #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 45px;
    margin-top: 25px;
  }

  .main_cart > img {
    width: 96px;
    height: 96px;
  }

  .main_cart span:first-of-type {
    font-size: 48px;
    margin-left: 40px;
    display: inline-block;
  }

  .main_cart span:last-of-type {
    font-size: 36px;
    margin-top: 10px;
    margin-left: 10px;
  }

  .graph_main {
    margin-top: 15px;
    height: 800px;
  }
</style>
